树状图一定要像树？试试更美的形态！

隔了一周，课代表又来上课啦～

今天向大家介绍一种图表，族谱图。哦不，是树状图。 

树状图一般由几个大枝干，再细分为小枝干，一层一层分级。

同学们看书会制作的思维导图也是一种树状图。

比如前段时间我们把民法典的构成做成了一张思维导图，但本质它也是个树状图。

上面的这种 S 型树状图，可以把要展示的信息清晰呈现，视觉阅读上也比较流畅。

还有一种是环形树状图，这种树状图的好处是把内容更集中展现，展现更多的是占比情况，不必纠结每一条信息文字的呈现。

对于数据量相对较多但无需展现密集信息的，环形树状图比 S 型 树状图更合适也更节省制图的空间。

 今天课代表推荐一个可以制作 树状图 的在线无代码免费工具 —— RawGraphs👏

（ https://rawgraphs.io/ ）

RawGraphs 上展示的一些案例，同学们看了是否想跃跃欲试～

课代表以《诺贝尔奖去了哪里？》为例子，分享如何制作环形树状图。

---

制作图表之前，我们先理清一下内容的层级关系。

▶ 第一层：以 诺贝尔六大奖项 为主枝干

▶ 第二层：每个奖项分别由哪些 国家 获得为次枝干

▶ 第三层：这些国家中有 谁 获得诺贝尔奖为小枝桠

---

好了，跟着课代表开始操作吧👇

Step 1 : 导入我们整理好的数据。

公众号后台回复 03 获取数据，进行数据测试～

 Step 2 : 选择 Circular Dendrogram(环形树状图)

Step 3-1 :  把我们的数据，拖拽到层级页面，可以看到从中心分出六个奖项的枝干。

Step 3-2 : 数据的位置代表层级的所在的位置，把 country 放在 award 下面，就可以看到分支下展示获得该奖项的国家。

Step 3-3 : 再把 id 拖入到层级中，让每一个获奖的人成为最外圈的一个节点。

Step 4：导出 svg 格式

用 RawGraphs 搭好我们图表的骨架之后，我们需要用 Adobe Illustrator 来给图表穿（mei）衣（hua）。

首先用Ai里面的选择工具删除最外圈的文字。

再选中其中某一个小圆圈，在菜单栏中【选择-相同-填色和描边】，就可以把同样类型的小圆圈选中，再组合（Ctrl / Command + G）。

然后进入到组合的图层，把最外层的小圆圈删掉。

接下去，需要给每种奖项设置不同的颜色。

我们先可以选中一簇奖项中所有内容，组合一下，然后选中上方的【重新着色图稿】快捷修改颜色。

其他部分也进行同样的操作，更明显的看出不同奖项的占比。

再在每个分类里面，把得奖数量较多的国家留下。

在外圈建立一个圆，把每个部分中间用剪刀工具切割，然后分别选取对应的颜色。为了在外圈放入每个颜色对应的奖项。

再复制一层上面的圆圈路径，建立路径文字，把文字剪切粘贴到路径上，这样文字就是弧形状态。

然后调整一下文字居中、颜色和大小。

但同学们会注意到，最下方三个奖项的文字，啊，你的脖子还好吗……

所以我们需要给文字做一个翻转，选择要翻转的文字，在菜单栏上方选择【文字-路径文字-路径文字选项-勾选翻转】，这样更易阅读👌

最后加入我们的标题和其他相关信息，我们这张图表就完成了🥳

在此基础上，我们还可以延展这种图表形式，做出 S 型的树状图。

方法一样，通过 RawGraphs 做出环形树状图的骨架，然后用 Adobe Illustrator 把每个部分拆分出来，凹成一个 S 型就可以，适合于信息需要全部展示的内容。

对了 ，如果你既想展示完整的内容，但时间有限。其实RawGraphs里面还有一种简单粗暴的形式。只要在类型中选择 Cluster Dendrogram，簇状树状图。

不过这种图表和 S 型树状图一样，更适合数据量相对较少的，如果遇到诺贝尔获奖的数据，这两个类型做出来的图会超长长长长长长长长长长。

---

公众号后台回复 03 获取数据，进行数据测试～

如果同学还有什么想学的图表，可以在我们的后台留言👀

那就下节图表课再见啦👋

---

◒◡◒

┊推 - 荐 - 阅 - 读┊

---

---